<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备测试向导</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 新增加载动画 */
        .loading-spinner {
            display: none;
            width: 3rem;
            height: 3rem;
            border: 0.25em solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 1rem auto;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 优化视频容器 */
        .video-container {
            position: relative;
            background: #000;
            border-radius: 0.5rem;
            min-height: 300px;
        }
        #loadingText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            z-index: 1;
        }

        .step-card {
            display: none;
            margin: 2rem auto;
            max-width: 800px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border-radius: 1rem;
        }
        .active-step {
            display: block;
        }
        video, audio {
            width: 100%;
            border-radius: 0.5rem;
        }
        .status-indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 0.5rem;
        }
        .btn-custom {
            padding: 0.75rem 2rem;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
         <div class="step-card active-step" id="step1">
            <div class="card-body p-4">
                <h3 class="card-title mb-4"><span class="status-indicator bg-primary"></span>摄像头测试</h3>
                <div class="video-container mb-4">
                    <div id="loadingText">
                        <div class="loading-spinner"></div>
                        <div>正在初始化摄像头...</div>
                    </div>
                    <video id="videoPreview" autoplay playsinline class="bg-dark"></video>
                </div>
                <button class="btn btn-primary btn-custom" onclick="nextStep('step2')" id="nextBtn1" disabled>
                    摄像头正常 - 下一步
                </button>
            </div>
        </div>

        <div class="step-card" id="step2">
            <div class="card-body p-4">
                <h3 class="card-title mb-4"><span class="status-indicator bg-primary"></span>音频测试</h3>
                <audio id="testAudio" controls>
                    <!-- 请在此处替换您的音频文件路径 -->
                    <source src="/static/audio/ss.mp3" type="audio/mpeg">
                    您的浏览器不支持音频播放
                </audio>
                <div class="mt-4">
                    <button class="btn btn-primary btn-custom" onclick="nextStep('step3')">音频正常 - 下一步</button>
                </div>
            </div>
        </div>

        <div class="step-card" id="step3">
            <div class="card-body p-4">
                <h3 class="card-title mb-4"><span class="status-indicator bg-primary"></span>麦克风测试</h3>
                <div class="mb-4">
                    <button id="recordButton" class="btn btn-danger btn-custom" onclick="toggleRecording()">
                        开始录音
                    </button>
                </div>
                <audio id="audioPlayback" controls class="mt-3"></audio>
                <div class="mt-4">
                    <a href="/applicant/avatar" id="finishBtn" class="btn btn-success btn-custom" style="display: none;">
                        测试完成 - 进入系统
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 摄像头初始化
          // 优化后的摄像头初始化逻辑
        let cameraStream = null;

        // 页面加载后立即预加载摄像头（带优化参数）
        window.addEventListener('DOMContentLoaded', () => {
            const videoConstraints = {
                width: { ideal: 640 },   // 降低分辨率
                height: { ideal: 480 },  // 降低分辨率
                frameRate: { ideal: 15 } // 降低帧率
            };

            // 显示加载状态
            document.querySelector('.loading-spinner').style.display = 'block';
            document.getElementById('loadingText').style.display = 'block';

            navigator.mediaDevices.getUserMedia({
                video: videoConstraints
            }).then(stream => {
                cameraStream = stream;
                const video = document.getElementById('videoPreview');
                video.srcObject = stream;

                // 视频加载完成后隐藏加载提示
                video.onloadedmetadata = () => {
                    document.querySelector('.loading-spinner').style.display = 'none';
                    document.getElementById('loadingText').style.display = 'none';
                    document.getElementById('nextBtn1').disabled = false;
                };
            }).catch(err => {
                document.getElementById('loadingText').innerHTML =
                    `<div class="text-danger">摄像头初始化失败:<br>${err}</div>`;
                console.error('摄像头错误:', err);
            });
        });

        // 修改步骤切换时释放资源
        function nextStep(nextId) {
            // 释放上一个步骤的资源
            if (nextId === 'step2' && cameraStream) {
                cameraStream.getTracks().forEach(track => track.stop());
            }
            document.querySelector('.active-step').classList.remove('active-step');
            document.getElementById(nextId).classList.add('active-step');
        }

        // 录音相关变量
        let mediaRecorder;
        let audioChunks = [];

        function toggleRecording() {
            const button = document.getElementById('recordButton');
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                button.textContent = '开始录音';
                button.classList.remove('btn-danger');
                button.classList.add('btn-primary');
            } else {
                navigator.mediaDevices.getUserMedia({ audio: true })
                    .then(stream => {
                        mediaRecorder = new MediaRecorder(stream);
                        audioChunks = [];

                        mediaRecorder.ondataavailable = e => {
                            audioChunks.push(e.data);
                        };

                        mediaRecorder.onstop = () => {
                            const audioBlob = new Blob(audioChunks);
                            const audioUrl = URL.createObjectURL(audioBlob);
                            document.getElementById('audioPlayback').src = audioUrl;
                            document.getElementById('finishBtn').style.display = 'inline-block';
                        };

                        mediaRecorder.start();
                        button.textContent = '停止录音';
                        button.classList.remove('btn-primary');
                        button.classList.add('btn-danger');
                    })
                    .catch(err => {
                        alert('无法访问麦克风: ' + err);
                    });
            }
        }

        // 步骤切换
        function nextStep(nextId) {
            document.querySelector('.active-step').classList.remove('active-step');
            document.getElementById(nextId).classList.add('active-step');
        }
    </script>
</body>
</html>